불필요한 상태

#React #state

불필요한 상태의 증가 = 리액트에 의해 관리되는 값이 늘어난다.
즉 렌더링에 영향을 주는 값이 늘어나서 관리 포인트가 더더욱 늘어나는것.

const [userList, setUserList] = useState(Mock_data);
const [complUserList, setComplUserList] = useState(Mock_data);

useEffect(() => {)
	const newList = complUserList.filter((user) => user.completed === true);
	setUserList(newList);
},[userList]);

이 코드는 mockdata안에 user객체안 completed가 true인 값만으로 리스트를 변환시켜 초기값으로 넣는 코드이다.

그런데 이 코드는 지금 state로 관리되는값을 늘리고있다는것

const complUserList = complUserList.filter((user) => user.completed === true);

그냥 단순하게 이렇게만 써도된다는것이다.

그러나 컴포넌트 내부내에서 고유한 값을 사용하지말고 컴포넌트 외부로 빼라고 했었었는데

이런 값은 렌더링마다 고유의 값을 가지는 계산된 값을 가지기때문에 사용해도된다는것이다.
vue같은곳에서는 Computed Value라고한다.

요약

  1. props를 useState에 넣지 않고 바로 return문에 사용하기
  2. 컴포넌트 내부 변수는 렌더링마다 고유한 값을 가짐
  3. 따라서 useState가 아닌 const로 상태를 선언하는 게 좋은 경우도 있음.